【JavaScript / DOM】関係要素ノードの取得 - 親子兄弟の要素ノードを取得する

JavaScriptの『関係要素ノードの取得方法』について解説します。

検証環境

JavaScript -

macOS

14.1

関係要素ノード

JavaScript/DOMのノードはHTMLドキュメントに従って親子関係や兄弟関係を持ちます。

それらの関係を表すプロパティにはparentNodeやchildNodesなどがありますが、要素ノードやテキストノード、コメントノードなど多種類のノードが含まれます。

要素ノードのみを扱う場合は少し不便なプロパティになりますが、JavaScript/DOMには要素ノードのみを対象するプロパティが存在します。

親要素ノード（parentElement）

親要素ノードを表すプロパティはparentElementです。

基本構文

ノード.parentElement

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.parentElement);
    ___ih_hl_end
</script>

Console

<div id="parent">...</div>

子要素ノード（children/firstElementChild/lastElementChild）

子要素ノードを表すプロパティは３つあります。

全ての子要素ノード（children）

全ての子要素ノードを表すプロパティはchildrenです。

基本構文

ノード.children

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.children);
    ___ih_hl_end
</script>

Console

HTMLCollection(3) [div#child_first, div#child_middle, div#child_last, ...]
  0: div#child_first
  1: div#child_middle
  2: div#child_last

最初の子要素ノード（firstElementChild）

最初の子要素ノードを表すプロパティはfirstElementChildです。

基本構文

ノード.firstElementChild

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.firstElementChild);
    ___ih_hl_end
</script>

Console

<div id="child_first"></div>

最後の子要素ノード（lastElementChild）

最後の子要素ノードを表すプロパティはlastElementChildです。

基本構文

ノード.lastElementChild

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.lastElementChild);
    ___ih_hl_end
</script>

Console

<div id="child_last"></div>

兄弟ノード（previousElementSibling/nextElementSibling）

兄弟ノードを表すプロパティは２つあります。

前の兄弟要素ノード（previousElementSibling）

前の兄弟要素ノードを表すプロパティはpreviousElementSiblingです。

基本構文

ノード.previousElementSibling

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.previousElementSibling);
    ___ih_hl_end
</script>

Console

<div id="sibling_pre"></div>

次の兄弟要素ノード（nextElementSibling）

次の（後ろの）兄弟要素ノードを表すプロパティはnextElementSiblingです。

基本構文

ノード.nextElementSibling

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.nextElementSibling);
    ___ih_hl_end
</script>

Console

<div id="sibling_next"></div>